<template>
  <div class="toolbar">
    <ul class="icons">
        <li :class="page==1?'active':''">
            <RouterLink to="/">
                <div><el-icon><HomeFilled /></el-icon></div>
                <div>首页</div>
            </RouterLink>
        </li>
        <li :class="page==2?'active':''">
            <RouterLink to="/about">
                <div><el-icon><Collection /></el-icon></div>
                <div>预留</div>
            </RouterLink>
        </li>
        <li :class="page==3?'active':''">
            <RouterLink to="/about">
                <div><el-icon><Collection /></el-icon></div>
                <div>预留</div>
            </RouterLink>
        </li>
        <li :class="page==4?'active':''">
            <RouterLink to="/about">
                <div><el-icon><Collection /></el-icon></div>
                <div>预留</div>
            </RouterLink>
        </li>
        <li :class="page==5?'active':''">
            <RouterLink to="/my">
                <div><el-icon><User /></el-icon></div>
                <div>我的</div>
            </RouterLink>
        </li>
    </ul>
  </div>
</template>

<script setup>

import { HomeFilled, Collection, User } from '@element-plus/icons-vue'
const props = defineProps(['page']);

</script>

<style scoped>
*{
    list-style:none;
}
a{
    text-decoration:none;
    color:#555;
}
.toolbar{
    border-top:solid 1px #999999;
    position:fixed;
    bottom:0;
    width:100vw;
    height:auto;
    background:#F9F9F9;
}
ul.icons{
    display:flex;
    width:100%;
    flex-direction: row;
    margin:0px;
    padding:0px;
}

ul.icons li{
    width:20%;
    padding:10px 0px;
    text-align:center;
    font-size:13px;
    text-align:center;
    color:#333;
}
ul.icons li:nth-child(1){
    flex-grow:1;
}
ul.icons li:nth-child(2){
    flex-grow:2;
}
ul.icons li:nth-child(3){
    flex-grow:3;
}
ul.icons li:nth-child(4){
    flex-grow:4;
}
ul.icons li:nth-child(5){
    flex-grow:5;
}
.active{
    background:#ddeeff;
}
</style>
